<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Highcharts折线图(默认图形)</title>
        <script type="text/javascript" src="../../js/jquery-1.8.2.js"></script>
        <script type="text/javascript">
            $(function() {
                $('#container').highcharts({// 默认图形类型为 ：(折线图)line，所以可省略chart的配置项
                    chart : {
                        renderTo : 'container', //设置显示图表的容器
                        type : 'line', //设置图表样式，可以为line,spline, scatter, splinearea bar,pie,area,column
                        //          defaultSeriesType: 'column',  //图表的默认样式
                        //          margin:[21, 23, 24, 54], //整个图表的位置(上下左右的空隙)
                        marginRight : 200, //右边间距
                        marginBottom : 25 //底部间距/空隙
                        //          inverted: false, //可选，控制显示方式，默认上下正向显示
                        //          shadow:true, //外框阴影
                        //          backgroundColor:"#FFF",
                        //          animation:true,
                        //          borderColor:"#888",
                        //          borderRadius:5,
                        //          borderWidth:1,
                        //          ignoreHiddenSeries:true,
                        //          reflow:true,
                        //          plotBorderWidth:1,
                        //          alignTicks:true
                    },
                    /* title 全属性 说明  */
                    title : {
                        text : '<span style="font-weight:bold ">月平均温度(折线图)</span>',
                        floating : false, //为true时，图形会挤占title的空间(默认为 false)
                        margin : 30, //title和图形区域的间距(若有副标题时，刚是title和副标题间的间距，默认值：15)
                        align : 'center', //title的方位,可选值：left,center,right(默认center)
                        x : -20, //tittle相对于图形左边界的的位置(左边界spacingLeft:默认:10)
                        y : 10, //title相对于图形顶部的的位置（顶部边界spacingTop：默认10）
                        userHTML : true, //是否使用html来渲染title
                        verticalAlign : 'top', //title的位置 ，可选 top middle,bottom (默认 top)
                        style : {
                            color : '#333333',
                            fontSize : 18
                        }
                    },
                    /*副标题属性与title基本类型，在此不作说述 ：*/
                    subtitle : {
                        text : '————记：2014.12.18',
                        x : 20
                    },
                    /*右下角的文本 */
                    credits:{ 
                        enabled: true,  
                        position: {//位置设置  
                            align: 'right',  
                            x: -10,  
                            y: -10  
                        },  
                        href: "http://www.highcharts.com",//点击文本时的链接  
                        style: {  
                            color:'blue'  
                        },  
                        text: "Highcharts Demo"//显示的内容  
                    }, 
                    /*X轴上的常用属性*/
                    xAxis : {
                        id : 'x_axis',
                        allowDecimals : true, //貌似只对Y轴有效，未验证出准确的效果
                        alternateGridColor : '#FDFFD5', //X轴上的间隔色
                        categories : ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
                        startOnTick : true, // 是否开启X轴首尾端标识(默认：true)
                        endOnTick : true,
                        showLastLabel : true, // 是否显示最后X轴的值
                        tickColor : '#FF0000', //X轴标识的颜色和宽度
                        tickWidth : 3,
                        minRange : 5, //数据横向展现的集中程度(值越大，数据越集中显示)
                        tickPosition : 'inside', //标识的朝向：默认是outside
                        tickLength : 0, //轴线标识的长度(主要应用于X轴)
                        plotLines : [{
                            color : '#FF0000',
                            width : 2,
                            value : 5 //轴线的位置(总长约为10)
                        }]
                    },
                    yAxis : {
                        title : {
                            text : '温度  (°C)'
                        },
                        ceiling : 40, //Y轴刻度上限值
                        floor : 0, //Y轴刻度下限值
                        lineWidth : 1, //Y轴营宽度(默认：0)
                        gridLineColor : 'green', //横线的颜色
                        gridLineDashStyle : 'Solid', //横线的类型，(虚线)Dash，(短点线)Dot等,默认是：(实线)Solid
                        gridLineWidth : 1, //横线宽度 (默认：0)
                        gridZindex : 1, //暂进未验证出来
                        startOnTick : true, // 是否开启X轴首尾端标识(默认：true)
                        min : -10, //Y轴启始端的值 ,受char 配置的alignTicks影响
                        minColor : '#EFEFFF', //最小值颜色
                        max : 30, //Y轴的最大值，endOnTick为true时，显示值可能会被四舍五入(会遮挡数据)
                        maxColor : '#102D4C', //最大值颜色
                        maxPadding : 0.05, //用于控制Y轴顶端延长度的幅度
                        minTickInterval : 10, //Y轴最小间隔值(值较大时才起作用，暂不清楚是何原因)
                        opposite : false, //是否将该轴显示在另一侧(一般用于多Y轴的情况下)
                        plotLines : [{// 区域划分线(中心线)
                            value : 15,
                            width : 2,
                            color : '#FF0000'
                        }],
                        label : {
                            align : 'left',
                            rotation : '45', //标签角度
                            text : 'label标签',
                            style : {
                                color : '#FF0000',
                            }
                        },
                        reverset : true, //是否反向显示（暂进未起作用）
                        reversedStacks : true,
                        showEmpty : true, //无数据时是否显示Y轴(默认true)
                        showFirstLabel : true, // 是否显示Y轴的最后一个值
                        showLastLabel : true, // 是否显示Y轴的第一个值
                        stops : null, //待分析
                        tickColor : '#FF0000', //X轴标识的颜色和宽度
                        tickWidth : 3,
                        tickPosition : 'inside', //标识的朝向：默认是outside
                        stackLabels : {//背景风格，要求：userHTML为true
                            userHTML : true,
                            enable : true,
                            style : {
                                backgroundColor : 'rgba(252, 255, 197, 0.7)',
                                color : 'black',
                                borderWidth : 1
                            }
                        }
                    },
                    tooltip : {
                        valueSuffix : '°C'
                    },
                    legend : {
                        layout : 'vertical',
                        align : 'right',
                        verticalAlign : 'middle',
                        borderWidth : 0
                    },
                    series : [{
                        name : '东京',
                        data : [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
                    }, {
                        name : '纽约',
                        data : [-2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
                    }, {
                        name : '柏林',
                        data : [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
                    }, {
                        name : '伦敦',
                        data : [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
                    }]
                });
            });

        </script>
    </head>
    <body>
        <script src="../../js/highcharts.src.js"></script>
        <script src="../../js/modules/exporting.js"></script>

        <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"> </div>

    </body>
</html>
